<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>统计分析</title>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">
    <%@include file="../include/commonFile.jsp" %>
</head>
<body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <form class="layui-form" action="${ctx}/crowdfund/detailCount/list.do" id="myForm" method="post">
                <input type="hidden" name="pageNo" id="pageNo"/>
                <div class="f-search-bar">
                    <div class="search-container">
                        <ul class="search-form-content">
                            <li class="form-item-inline"><label class="search-form-lable">众筹主题<span class="f-verify-red">*</span></label>
                                <div class="layui-input-inline" style="width: 610px">
                                    <select id="eventId" name="eventId" lay-search lay-verify="eventId" lay-filter="eventId">
                                        <option value="">请选择主题</option>
                                        <c:forEach var="event" items="${crowdfundEventList}">
                                            <option value="${event.id}" <c:if test="${event.id == input.eventId}">selected="selected"</c:if>>${event.name}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </li>
                        </ul>
                        <ul class="search-form-content">
                            <li class="form-item-inline"><label class="search-form-lable">报名日期<span class="f-verify-red">*</span></label>
                                <div class="layui-input-inline">
                                    <input class="layui-input" type="text" name="applyDateStart" value="${input.applyDateStart}"
                                           lay-filter="applyDateStart" lay-verify="applyDateStart" placeholder="开始日">
                                </div>
                                至
                                <div class="layui-input-inline">
                                    <input class="layui-input" type="text" name="applyDateEnd" value="${input.applyDateEnd}"
                                           lay-filter="applyDateEnd" lay-verify="applyDateEnd" placeholder="结束日">
                                </div>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <div class="layui-input-inline">
                                    <input class="layui-input" type="text" name="period" value="${input.period}"
                                           lay-filter="period" lay-verify="period">
                                </div>
                                段时间
                            </li>
                        </ul>
                        <ul class="search-form-content">
                            <li class="form-item-inline"><label class="search-form-lable">&nbsp;&nbsp;&nbsp;报名后<span class="f-verify-red">*</span></label>
                                <div class="layui-input-inline">
                                    <input class="layui-input" type="text" name="qureyDayStart" value="${input.qureyDayStart}"
                                           lay-filter="qureyDayStart" lay-verify="qureyDayStart">
                                </div>
                                天
                                &nbsp;&nbsp;至&nbsp;
                                <div class="layui-input-inline">
                                    <input class="layui-input" type="text" name="qureyDayEnd" value="${input.qureyDayEnd}"
                                           lay-filter="qureyDayEnd" lay-verify="qureyDayEnd">
                                </div>
                                天
                            </li>
                            <li class="form-item-inline">
                                <div class="sub-btns" style="width: 262px; text-align: right;">
                                    <a class="layui-btn layui-btn-danger" lay-submit
                                       href="javascript:submitFunction('#myForm');">查询</a>
                                    <a class="layui-btn layui-btn-normal"
                                       href="javascript:resetFunction('#myForm');">重置</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </form>
            <div class="my-act-list-content">
                <ul id="view">
                    <table class="layui-table">
                        <colgroup>
                            <col>
                            <col width="8%">
                            <col width="8%">
                            <col width="8%">
                            <col width="8%">
                            <col width="10%">
                            <col width="8%">
                            <col width="8%">
                            <col width="8%">
                            <col width="10%">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>时间段</th>
                                <th>报名人数(人)</th>
                                <th>成功人数(人)</th>
                                <th>报名成功率</th>
                                <th>订单数量(单)</th>
                                <th>每人平均订单(单)</th>
                                <th>金额(元)</th>
                                <th>成功金额(元)</th>
                                <th>金额成功率</th>
                                <th>每人平均金额(元)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:if test="${not empty list}">
                                <c:forEach var="count" items="${list}">
                                    <tr>
                                        <td>${count.periodDate}</td>
                                        <td>${count.applyNum}</td>
                                        <td>${count.successNum}</td>
                                        <td>${count.successNumRate}</td>
                                        <td>${count.orderNum}</td>
                                        <td>${count.averageOrderNum}</td>
                                        <td>${count.money}</td>
                                        <td>${count.successMoney}</td>
                                        <td>${count.successMoneyRate}</td>
                                        <td>${count.averageMoney}</td>
                                    </tr>
                                </c:forEach>
                            </c:if>
                        </tbody>
                    </table>
                </ul>
            </div>
        </div>
    </section>
</div>

<script type="text/javascript" src="${ctx}/script/common/table_option.js"></script>
<script type="text/javascript" src="${ctx}/script/common/list.js"></script>
<script type="text/javascript">

    var form;

    $(function () {
        //加载日历
        layui.use(['laydate', 'form'], function () {
            var laydate = layui.laydate;
            form = layui.form;

            // 查询开始日期
            var start = {
                elem: 'input[name=applyDateStart]',
                done: function(value, date, endDate){
                    $('input[name="period"]').val(1);
                    $('input[name="qureyDayStart"]').val(0);
                    $('input[name="qureyDayEnd"]').val(0);
                }
            };

            var end = {
                elem: 'input[name=applyDateEnd]',
                done: function(value, date, endDate){
                    $('input[name="period"]').val(1);
                    $('input[name="qureyDayStart"]').val(0);
                    $('input[name="qureyDayEnd"]').val(0);
                }
            };
            laydate.render(start);
            laydate.render(end);

            form.on('select(eventId)', function (data) {
                if (!data.value) {
                    resetFunction('#myForm');
                    return false;
                }
                // 选择的是全部
                if (data.value == '0') {
                    var now = new Date();
                    var date = new Date();
                    date.setDate(now.getDate() - 7);

                    var format = 'yyyy-MM-dd';

                    $('input[name="applyDateStart"]').val(date.Format(format));
                    $('input[name="applyDateEnd"]').val(now.Format(format));
                    $('input[name="period"]').val(1);
                    $('input[name="qureyDayStart"]').val(0);
                    $('input[name="qureyDayEnd"]').val(0);
                    return false;
                }
                $.get('${ctx}/crowdfund/detailCount/eventDetail.do', {
                    id: data.value
                },
                function (ret) {
                    if (ret.success) {
                        $('input[name="applyDateStart"]').val(ret.data.start);
                        $('input[name="applyDateEnd"]').val(ret.data.end);
                        $('input[name="period"]').val(1);
                        $('input[name="qureyDayStart"]').val(0);
                        $('input[name="qureyDayEnd"]').val(0);
                    }
                });
            });

            form.verify({
                eventId: function (value) {
                    if (!value) {
                        return '请选择主题';
                    }
                },
                applyDateStart: function (value) {
                    if (!value) {
                        return '请选择报名日期开始日';
                    }
                },
                applyDateEnd: function (value) {
                    if (!value) {
                        return '请选择报名日期结束日';
                    }
                },
                period: function (value) {
                    if (!value) {
                        return '请填写报名日期时间段';
                    }
                    if (!verifyNum(value)) {
                        return '请输入正确的数字';
                    }
                },
                qureyDayStart: function (value) {
                    if (!value) {
                        return '请填写报名后第几天';
                    }
                    if (!verifyNum(value)) {
                        return '请输入正确的数字';
                    }
                },
                qureyDayEnd: function (value) {
                    if (!value) {
                        return '请填写报名后第几天';
                    }
                    if (!verifyNum(value)) {
                        return '请输入正确的数字';
                    }
                }
            });
        });
    })
    
    function verifyNum(value) {
        var parttern =  /^\d+$/;
        return parttern.test(value);
    }
    function verifyMoney(value) {
        var parttern = /^[0-9]*(\.[0-9]{1,2})?$/;
        return parttern.test(value);
    }
</script>
<script type="text/javascript">
    txz.initHeader({
        nav: [{
            name: '统计分析',
            curr: true
        }]
    });
</script>
</body>
</html>